<template>
  <div class="toupiao">
    <h3>优秀党员评选</h3>
    <div class="shangban">
        <ul>
            <li>
                <h4>2</h4>
                <p>报名人数</p>
            </li>
            <li>
                <h4>0</h4>
                <p>累计投票</p>
            </li>
            <li>
                <h4>2</h4>
                <p>访问量</p>
            </li>
        </ul>
        <p>距离投票结束</p>
    </div> 
    <p>
        <input type="text" placeholder="请输入编号或姓名">
    <button>搜索</button>
    </p>
    <div class="xiaban">
        <aside>
            <p>参与投票</p>
            <router-link :to="{name:'ZuiXin'}" style="font-size: 20px;margin-left:14rem">最新</router-link>
            <router-link :to="{name:'MoRen'}" style="font-size: 20px;margin-left:20px">默认</router-link>
        </aside>
        <article>
            <router-view></router-view>
        </article>
    </div>
  </div>
</template>

<script>
export default {
name:'TouPiao',
}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}
.toupiao{
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #c40f18;
}
.toupiao h3{
    color: white;
}
.shangban {
    width: 80%;
    text-align: center;
    margin: auto auto;
    background-color: #d6575e;
    border-radius: 5px;
}
.shangban ul{
    width: 80%;
    overflow: hidden;
    display: flex;
    text-align: center;
    margin: auto auto;
}
.shangban ul li{
    width: 33%;
}
.shangban ul li h4{
    color: #f2be7f;
}
.shangban ul li p{
    color: white;
}
.shangban p{
    color: white;
}
input{
    width: 60%;
    height: 40px;
    border: none;
    border-radius: 40px;
    background-color: #d6575e;
    color: white;
}
button{
    width: 20%;
    height: 40px;
    color: #3e3b2c;
    background-color: #ffe588;
    border: none;
    border-radius: 40px;
    margin-left: 5px;
    margin-top: 10px;
}
.xiaban aside{
    width: 80%;
    margin: auto auto;
    display: flex;
    margin-top: 20px;
}
.xiaban aside p{
    color: white;
    font-size: 30px;
    margin-left: 20px;
    float: right;
}
.xiaban aside .router-link-active{
    color: #fde682;
    text-decoration: underline;
}
article{
    width: 100%;
    overflow: hidden;
}
</style>